<template>
    <div>
      <h1>流浪宠物上报</h1>
      <el-form :inline="true" :model="fromData" class="demo-form-inline">
        

        <el-form-item label="处理状态">
          <el-select v-model="value" placeholder="请选择处理状态"  clearable>
            <el-option label="已处理" value="已处理"></el-option>
            <el-option label="未处理" value="未处理"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSelect">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table

        :data="dangqianyeData"
        style="width: 100%">
        
        <el-table-column
          label="序号" align='center'  prop="xuhao"
          >
        </el-table-column>
        <el-table-column
          label="上报说明" align='center'  prop="shangbao"
          >
        </el-table-column>
        <el-table-column
          label="上报时间" align='center'  prop="created"
        >
        </el-table-column>
        <el-table-column
          label="处理状态" align='center' prop="zhuangtai"
          >
          
        </el-table-column>
        <el-table-column align='center' label="操作">
          <template slot-scope="scope">

            <el-button
              size="mini"
              @click="Edit(scope.$index, scope.row)">编辑</el-button>

               <!-- 对上面的弹出框 -->
              <el-dialog
                  title="更改状态"
                  :visible.sync="handleEdit"
                  width="30%"
                  :before-close="handleClose">

            <div>  
              <el-select v-model="rowData.zhuangtai" placeholder="" >  
                    <el-option  
                      v-for="item in options"  
                      :key="item.value"  
                      :label="item.label"  
                      :value="item.value">  
                    </el-option>  
            </el-select>            
          </div>  

                  
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="handleEdit = false">取 消</el-button>
                    <el-button type="primary" @click="querenhandleEdit ">确 定</el-button>
                  </span>
                </el-dialog>


            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

      <!-- 有关分页的设置 -->
      <el-pagination
      background
      layout="total,prev, pager, next,jumper"  
      @current-change="changePage"
      :current-page="dangqianyema"
      :total="datatotal"
      :page-size="7"
      >
      </el-pagination>

    </div>
    </template>
    
    <script>  
    import axios from 'axios';  
      
    export default {  
      name: 'animal',  
      data() {  
        return {  
          fromData: {  
            name: '',  
            type: '',      
          },  
          rowData:{
            xuhao:"",
              zhuangtai:"",
          },
          userList: [],
          value:"" ,
          datatotal:0,
          dangqianyema: 1,  
        handleEdit: false,
        //弹出框的选项
        options: [  
      { value: '已处理', label: '已处理' },  
      { value: '未处理', label: '未处理' },  
      // 添加更多选项...  
    ]  
        };  
      },  

      //分页，设置每页显示的数据的条数
      computed: {  
        dangqianyeData() {  
          let startIndex = (this.dangqianyema - 1) * 7;  
          return this.userList.slice(startIndex, startIndex + 7);  
        },  
        maxPage() {  
          return Math.ceil(this.total / 7);  
        },  
      },  
      created() {  
        this.getdata();  
      },  
      methods: {  
        //后端数据传入
        getdata() {  
          axios.get("http://localhost:8081/liulang/show")  
            .then(response => {  
              console.log(response)
              this.userList = response.data.data;  
              this.datatotal = response.data.data.length;
            })  
            .catch(error => {  
              console.error('There was an error!', error);  
            });  
        },  

        //查询
        onSelect() {  
          console.log(this.value); 
          axios.get("http://localhost:8081/liulang/getByzt?zt="+this.value)  
            .then(response => {  
              console.log(response)
              this.userList = response.data.data;  
              this.datatotal = response.data.data.length;
            })  
            .catch(error => {  
              console.error('There was an error!', error);  
            });  
        },  

        selectedOption(){},
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
        //编辑方法的地方
         
        changePage(page) {  
          this.dangqianyema = page;  
        },  

        //编辑按钮触发实践
        Edit(index,row){
          console.log(this.value); 
      
          console.log(row.zhuangtai),
         this.rowData.zhuangtai=row.zhuangtai
         this.rowData.xuhao=row.xuhao
          this.handleEdit=true

        },

//下拉框确认按钮的时间
        querenhandleEdit(){
          axios.post("http://localhost:8081/liulang/modifyBYzhuangtai",this.rowData)  
            .then(response => {  
              console.log(response)
              this.userList = response.data.data;  
              this.datatotal = response.data.data.length;
            })  
            .catch(error => {  
              console.error('There was an error!', error);  
            });  
          console.log(this.rowData.xuhao)
          this.handleEdit=false

        },


        //删除
        handleDelete(index,row) {  
        
          console.log(row.xuhao)
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {  
            confirmButtonText: '确定',  
            cancelButtonText: '取消',  
            type: 'warning'  
          }).then(() => {  
            
            // 假设我们有一个删除API，这里只是从前端数组中移除  
            const index = this.userList.findIndex(item => item.xuhao=== row.xuhao);

            console.log(row.xuhao) 
           
           //删除操作
            axios.post("http://localhost:8081/liulang/deleteBYxh?xh="+row.xuhao)  
            .then(response => {  
              console.log(response)
              this.userList = response.data.data;  
              this.datatotal = response.data.data.length;
            })  
            .catch(error => {  
              console.error('There was an error!', error);  
            });  
            if (index !== -1) {  
              // this.userList.splice(index, 1);  
              this.$message({  
                type: 'success',  
                message: '删除成功!'  
              });  
            }  
          }).catch(() => {  
            this.$message({  
              type: 'info',  
              message: '已取消删除'  
            });  
          });  
        }  
      }  
    };  



    
   
    </script>
    <style scoped>
      .el-table {
        margin: auto;
        margin-top: 20px;
      }
     .el-pagination{
      text-align: center;
      margin-top: 20px;
     }
     h1{
     
      font-weight: 1000px;
      font-size: 40px;
      color: #f9f49c;
     }
    </style>